<!DOCTYPE html>
<html>
<head>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
.composited {
  will-change: transform;
}

.background {
  position: fixed;
  background-color: lightgray;
  width: 300px;
  height: 300px;
  top: 150px;
  left: 100px;
}

.cyan {
  background-color: cyan;
}

.lime {
  background-color: lime;
}

.overlapping {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 100px;
}

#description {
  position: absolute;
  top: 100px;
  left: 450px;
  width: 300px;
}

#testResults {
  display: none;
}

body {
  margin: 0px;
}
</style>

<script>
    if (window.testRunner) {
        testRunner.waitUntilDone();
        testRunner.dumpAsText();
    }

    if (window.internals)
        internals.settings.setPreferCompositingToLCDTextEnabled(true);

    function runTest()
    {
        if (!window.internals)
            return;

        (function() {

          return new Promise(function(resolve) {
              // Case 1
              document.getElementById('Case1').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);

              resolve();
          });

        })().then(function() {

            return new Promise(function(resolve) {

                // Case 2
                internals.startTrackingRepaints(document);
                window.scrollTo(0, 80);
                runAfterLayoutAndPaint(function() {
                    document.getElementById('Case2').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
                    internals.stopTrackingRepaints(document);

                    resolve();
                });

          });

        }).then(function() {

            return new Promise(function(resolve) {

                // Case 3
                internals.startTrackingRepaints(document);
                window.scrollTo(0, 120);
                runAfterLayoutAndPaint(function() {
                    document.getElementById('Case3').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
                    internals.stopTrackingRepaints(document);

                    resolve();
                });

            });

        }).then(function() {

            return new Promise(function(resolve) {

                // Case 4
                internals.startTrackingRepaints(document);
                window.scrollTo(0, 170);
                runAfterLayoutAndPaint(function() {
                    document.getElementById('Case4').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
                    internals.stopTrackingRepaints(document);

                    resolve();
                });

            });

        }).then(function() {

          // Display the test results only after test is done so that it does not affect repaint rect results.
          document.getElementById('testResults').style.display = "block";

          if (window.testRunner)
              testRunner.notifyDone();

        }).catch(function(e) {

          console.error(e);
          
        });
    }
</script>
</head>

<body onload="runTest()">

  <div id="description">
    <p>The gray div is a composited fixed-position element, and the cyan/lime
    elements should be squashed together on top. When scrolling, paragraphs may
    pop in-and-out of the squashing layer when they change overlapping status
    with respect to the composited layer underneath.</p>
  
    <p>This scenario tests (1) that content repaints correctly as layers pop in
    and out of squashing, and (2) that the positioning of the squashing layer
    remains correct (i.e. scrolls properly) when the squashing layer is on top
    of a fixed-position composited layer.</p>
  </div>

  <div class="composited background"> </div>

  <div id="paragraph-a" class="overlapping cyan"></div>
  <div id="paragraph-b" class="overlapping lime"></div>
  <div id="paragraph-c" class="overlapping cyan"></div>
  <div id="paragraph-d" class="overlapping lime"></div>
  <div id="paragraph-e" class="overlapping cyan"></div>
  <div id="paragraph-f" class="overlapping lime"></div>
  <div id="paragraph-g" class="overlapping cyan"></div>
  <div id="paragraph-h" class="overlapping lime"></div>
  <div id="paragraph-i" class="overlapping cyan"></div>
  <div id="paragraph-j" class="overlapping lime"></div>
  <div id="paragraph-k" class="overlapping cyan"></div>
  <div id="paragraph-l" class="overlapping lime"></div>
  <div id="paragraph-m" class="overlapping cyan"></div>
  <div id="paragraph-n" class="overlapping lime"></div>

  <div id="testResults">
    CASE 1, original layer tree:
    <pre id="Case1"></pre>

    CASE 2, scrolling y to 80, new layers will be squashed, so things repaint:
    <pre id="Case2"></pre>

    CASE 3, scrolling y to 120, no repaints expected:
    <pre id="Case3"></pre>

    CASE 4, scrolling y to 170 new layers will be squashed, so things repaint:
    <pre id="Case4"></pre>
  </div>

</body>

</html>
